<template>
  <div class="cart-goods-list-items" v-if="CartGoodsList.length!=0">
    <li v-for="item in CartGoodsList" class="cart-goods-list-item"  >
      <div class="cart-goods-list-item-left ">
        <input type="checkbox" class="check" :checked="item.isChecked" @click="item.isChecked=!item.isChecked" >
        <img :src="item.image">
      </div>
      <div class="cart-goods-list-item-right">
        <div class="item-title">
          {{item.title}}
        </div>
        <div class="item-desc">
          {{item.desc}}
        </div>
        <div class="item-price-count flex">
          <div class="price">
            ￥{{item.price}}
          </div>
          <div class="item-count flex">
            <div><button @click="item.count--" :disabled="item.count===1" >-</button></div>
            <div>{{item.count}}</div>
            <div><button @click="item.count++">+</button></div>
          </div>
        </div>
      </div>
    </li>
  </div>
  <div class="cart-goods-list-items-null" v-else>
    <img src="../../../assets/img/cart/购物车为空.svg" alt="">
    <div>还是空的，去挑选喜欢的商品把~</div>
    <div class="button-div"><button type="button" @click="buttonClick">去看一看</button></div>
  </div>
</template>

<script>
  export default {
    name: "CartGoodsListItem",
    data(){
      return{
        CartGoodsList:this.$store.state.Cart,
      }
    },
    methods:{
      buttonClick(){
        this.$router.push('/home')
      }
    }
  }
</script>

<style scoped>
  .cart-goods-list-item{
    list-style: none;
    display: flex;
    padding-top: 4px;
    padding-bottom: 5px;
    border-bottom: 1px #8E8E8E solid;
  }
  .cart-goods-list-item-left{
    width: 35%;
    align-items: center;
  }
  .cart-goods-list-item-right{
    width: 65%;
    position: relative;
    margin-left: 7px;


  }
  .cart-goods-list-item-left img{
    height: 120px;
    width: 90px;
    border-radius: 6px;
    vertical-align: middle;

  }
  .check{
    width: 12px;
    height: 12px;
    overflow: hidden;
    border-radius: 50% 50%;
    border: 1px solid #ececec;
  }
  .item-title{
    font-size: 13px;
  }
  .item-desc{
    padding-top: 10px;
    color: #8E8E8E;
    font-size: 12px;
  }
  .item-price-count{
    margin-top: 30px;

  }
  .price{
    font-size: 17px;
    color: #E91E62;

  }
  .flex{
    display: flex;
  }
  .item-price-count div{
    flex: 1;
  }
  .item-count div{
    flex:1;
    text-align: center;

  }
  .cart-goods-list-items-null{
    text-align: center;
  }
  .button-div{
    margin-top: 15px;
  }
  .button-div button{
    width: 120px;
    height: 30px;
    border-radius: 10px;
    border: none;
    background-color: #e91e62;
  }
</style>